<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.js" ></script>
    <script>
        $(document).ready(function(){
            $("div:eq(0)").empty(); // innerHTML = ""
            $("div:eq(1) > span:nth-of-type(1)").remove()

        })

    </script>
</head>
<body>
    <div> 
         <span>John</span>  <b>Kim</b> 
          <span>Adam</span>  <b>Rafael</b>  <span>Oleg</span>
    </div>
    <div>  
        <b>Dave</b>  <span>Ann</span>
    </div>
        <div>  <i><span>Maurice</span></i> 
             <span>Richard</span>  <span>Ralph</span>  <span>Jason</span>
    </div>
    <ul>
        <li>aaaa</li>
        <li>bbbb</li>
    </ul>
    <script>
        // $().click(fucntion(){})    jq1.7 on(事件， 回调函数)
        $("li").on("click", function(){
            alert($(this).html())
        })
    </script>
    <div id="d1">
        111
        <div id="d2">
            33333
        </div>
        2222
    </div>
    <script>
       // 1. 事件的冒泡，和事件的捕获 方向是相反的
       // .addEventListener("click", function(){alert("div1")}, true); true捕获， false冒泡
       // 2. 冒泡的需要阻止事件的冒泡
       //   1. jq return false
       //   2. event.stopPropagation();
        $("#d1").on("click", function(){
            alert("div1")
        })
       $("#d2").on("click", function(event){
            alert("div2")
            // return false; // ？？？终止了事件的冒泡 jQ
           // event.stopPropagation(); // event.stopPropagation()； 阻止事件的冒泡 JS
        }) 
        /*
        $("#d1").get(0).addEventListener("click", function(){alert("div1")}, true); // true事件的捕获
        $("#d2").get(0).addEventListener("click", function(){alert("div2")}, true); // true事件的捕获
        */
    </script>
</body>
</html>